<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
	<head>
	<title>Insert title here</title>
	<script type="text/javascript">
		function getXHR(){
			var xhr = new XMLHttpRequest();
			return xhr;
		}
	
		function getUser(){
			var xhr = getXHR();
			
			//2.处理事件
			xhr.onreadystatechange = function(){
				
				if(xhr.readyState==4 && xhr.status==200){
					
					var str = xhr.responseText;
					//将字符串变为Json对象
					var obj = JSON.parse(str);//json字符串解码
					if(obj.state==1){
						document.getElementById("name").value = obj.data.name;
						document.getElementById("phone").value = obj.data.phone;
						document.getElementById("email").value = obj.data.email;	
					}
				}
			};
			
			xhr.open("get","../user/test2.do",true);
			xhr.send();
		}
		
		function getCity2(provinceCode){
			var xhr = getXHR();
			
			xhr.onreadystatechange = function(){
				if(xhr.readyState==4 && xhr.status==200){
					var obj = JSON.parse(xhr.responseText);
					console.log(xhr.responseText);
					var cityNode = document.getElementById("city");
					cityNode.innerHTML = "<option>---请选择---</option>";
					if(obj.state==1){
						for(var i=0;i<obj.data.length;i++){
							var option = new Option(obj.data[i].name,obj.data[i].code);
							cityNode.appendChild(option);
						}
					}
				}
			}
			//post方式:
			xhr.open("post","../user/getCity2.do",true);
			xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");
			xhr.send("provinceCode="+provinceCode);
			//get方式:
			//xhr.open("get","../user/getCity.do?provinceCode="+provinceCode,true);
			//xhr.send();	
			
		}
		//使用jq
		function jqCheckName(){
			$.ajax({	
				url:"../user/jqCheckName.do",
				data:"username="+$("#username").val(),
				type:"post",
				dataType:"json",
				success:function(obj){
					console.log(obj.state+","+obj.message);
					
					$("#namespan").html(obj.message);
					if(obj.state==0){
						$("#namespan").css("color","red");
					}else{
						$("#namespan").css("color","green");
					}
				}
			})
			
		}		
	</script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-3.1.1.min.js"></script>
	</head>
	<body>
		<h3><a href="#" onclick="getUser();">显示用户名信息</a></h3>
		
		用户名:<input type="text" name="name" id="name"><br>
		电&nbsp;&nbsp;话:<input type="text" name="phone" id="phone"><br>
		邮&nbsp;&nbsp;箱:<input type="text" name="email" id="email"><br>
		
		<h3>利用Json的二级联动菜单(post)</h3>
			省:<select id="province" name="province" onchange="getCity2(this.value);">
					<option value="0">---请选择---</option>
					<option value="1">四川省</option>
					<option value="2">广东省</option>
				</select>
			城市:<select id="city" name="city">
					<option>---请选择---</option>
				</select>
				
		<h3>JQ的用户注册用户名验证(post)</h3>
		<form action="">
			用户姓名:<input type="text" name="username" id="username"  onblur="jqCheckName();"> <span id="namespan"></span><br>
			用户密码:<input type="password" name="password" id="password"><br>
			<input type="submit" value="提交">
		</form>	
	
	</body>
</html>